<template>
  <f7-page class="land-body">
    <qm-currentcy-navbar title="登录">
      <template #nav-right>
        <f7-icon f7="ellipsis"></f7-icon>
      </template>
    </qm-currentcy-navbar>
    <img src="static/img/land/index1/bgc.png" alt="" class="bgcimg" />
    <div class="hello">您好！欢迎登录</div>
    <f7-login-screen-title class="pingtai">
      广州市某某某某综合分析应用平台
    </f7-login-screen-title>
    <!-- 登录框 -->
    <f7-list style="text-align: right">
      <qm-field
        v-model="user"
        placeholder="请输入您的账号"
        clearable
        class="qmfield"
      >
        <template #left-icon>
          <img
            src="static/img/land/index1/login_user.svg"
            alt=""
            class="iconimg"
          />
        </template>
      </qm-field>
      <qm-field
        v-model="password"
        placeholder="请输入您的密码"
        :type="textstyle"
        class="qmfield"
      >
        <template #left-icon>
          <img
            src="static/img/land/index1/login_mima.svg"
            alt=""
            class="iconimg"
          />
        </template>
        <template #right-icon>
          <img
            src="static/img/land/index1/biyan.svg"
            alt=""
            width="30px"
            height="12px"
            @click="passhidden()"
            v-if="!showpassword"
          />
           <img
            src="static/img/land/index1/kaiyan.svg"
            alt=""
            width="30px"
            height="12px"
            v-else
            @click="passhidden()"
          />
        </template>
      </qm-field>
      <f7-link class="qm-link">忘记密码</f7-link>
    </f7-list>
    <!-- 登录按钮 -->
    <f7-button raised fill round class="qm-button">登录</f7-button>
    <qm-divider class="divider" :hairline="false"> 第三方登录 </qm-divider>
    <f7-row class="qm-row">
      <f7-col
        ><img src="static/img/land/index1/weixin.png" alt=""
      /></f7-col>
      <f7-col><img src="static/img/land/index1/renlian.png" alt="" /></f7-col>
      <f7-col><img src="static/img/land/index1/shouji.png" alt="" /></f7-col>
      <div class="footer">广州市齐明软件科技有限公司提供技术支持</div>
    </f7-row>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      user: "",
      password: "",
      showpassword: false,
    };
  },
  computed: {
    textstyle() {
      if (this.showpassword) {
        return "text";
      } else {
        return "password";
      }
    },
  },
  methods: {
    passhidden() {
      this.showpassword = !this.showpassword;
    },
  },
};
</script>

<style lang="less" scoped>
.land-body {
  background-color: var(--color-fill-grey-inverse);
  .bgcimg {
    position: relative;
    top: calc(137px * var(--ratio));
    left: calc(22px * var(--ratio));
    width: calc(175px * var(--ratio));
    height: calc(131px * var(--ratio));
  }
  .hello {
    margin-top: calc(65px * var(--ratio));
    margin-left: calc(62px * var(--ratio));
    color: #49494a;
    font-size: calc(39px * var(--ratio));
  }
  .pingtai {
    margin-left: calc(62px * var(--ratio));
    margin-right: calc(93px * var(--ratio));
    color: #28282c;
    font-size: calc(59px * var(--ratio));
    margin-top: calc(18px * var(--ratio));
    font-weight: 700;
    text-align: left;
  }
  /deep/.van-cell {
    padding-bottom: 0px;
    margin-top: calc(40px * var(--ratio));
  }
  .qmfield {
    margin-left: calc(43px * var(--ratio));
    margin-right: calc(74px * var(--ratio));
    --f7-input-font-size: calc(28px * var(--ratio));
    width: 90%;
    /deep/ .van-field__left-icon {
      line-height: 40px;
      margin-right: calc(15px * var(--ratio));
    }
    /deep/ .van-field__control {
      width: 80%;
    }
    /deep/ .van-field__body {
      justify-content: space-between;
    }
    .iconimg {
      height: calc(28px * var(--ratio));
    }
  }
  .qm-link {
    margin-right: 32px;
    font-size: calc(29px * var(--ratio));
    margin-top: 10px;
    color: var(--color-brand);
  }
  .qm-button {
    margin: 0px calc(52px * var(--ratio));
    height: calc(110px * var(--ratio));
    line-height: calc(110px * var(--ratio));
    background-color: var(--color-brand);
    font-size: var(--font-size-maintitle);
    --f7-button-raised-box-shadow: auto;
  }
  .divider {
    margin: calc(82px * var(--ratio)) calc(94px * var(--ratio)) 0px;
    font-size: calc(27px * var(--ratio));
    color: var(--color-text-subtext);
  }
  .qm-row {
    margin: calc(58px * var(--ratio)) calc(94px * var(--ratio)) 0px;
    text-align: center;
    position: relative;
    img {
      width: calc(82px * var(--ratio));
      height: calc(82px * var(--ratio));
    }
    .footer {
    position: absolute;
    text-align: center;
    margin-top: 143px;
    font-size: 12px;
    left: 0px;
    right: 0px;
    color: #959cb2;
  }
  }
/deep/input:-webkit-autofill { box-shadow: 0 0 0px 1000px #ffff inset !important;}
}
</style>
